<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分类</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/swiper-4.3.3.min.css" />
		<link rel="stylesheet" href="css/fenlei.css" />
	</head>
	<body>
		<div class="mobile">
			<header>
				<div class="back">
					<input type="button" value="Back" />
				</div>
				<div class="sel">
					<select name="city" id="">
						<option value="广州">广州</option>
						<option value="深圳">深圳</option>
					</select>
				</div>
				<div class="fenlei">
					<p>分类</p>
				</div>
			</header>
			<section>
				<div class="top">
					<!--<div>
						<img src="img/meishi.png" />
						<p>美食</p>
					</div>
					<div>
						<img src="img/dianying.png" />
						<p>电影</p>
					</div>
					<div>
						<img src="img/yundong.png" />
						<p>运动</p>
					</div>
					<div>
						<img src="img/changge.png" />
						<p>唱歌</p>
					</div>-->
					<div class="swiper-container">
					    <div class="swiper-wrapper">
					      <div class="swiper-slide">
					      		<img src="img/meishi.png" />
					      		<p>美食</p>
					      </div>
					      <div class="swiper-slide">
					      	<img src="img/dianying.png" />
					      	<p>电影</p>
					      </div>
					      <div class="swiper-slide">
					      	<img src="img/yundong.png" />
					      	<p>运动</p>
					      </div>
					      <div class="swiper-slide">
					      	<img src="img/changge.png" />
					      	<p>唱歌</p>
					      </div>
					      <div class="swiper-slide">
					      		<img src="img/meishi.png" />
					      		<p>美食</p>
					      </div>
					      <div class="swiper-slide">
					      	<img src="img/dianying.png" />
					      	<p>电影</p>
					      </div>
					      <div class="swiper-slide">
					      	<img src="img/yundong.png" />
					      	<p>运动</p>
					      </div>
					      <div class="swiper-slide">
					      	<img src="img/changge.png" />
					      	<p>唱歌</p>
					      </div>
					    </div>
					    <!-- Add Pagination -->
					    <div class="swiper-pagination"></div>
					  </div>
				</div>
				<!--<div class="lunhuan">
					<div><img src="img/lunhuan.png"/></div>
				</div>-->
				<div class="title">
					<div class="titleL">
						<div class="flower">
							<img src="img/meishilei.png"/>
						</div>
						<div class="youhui">
							<h4>美食类</h4>
						</div>
					</div>
					<div class="titleR">
						<div class="more">
							<h4><a href="product.html">更多</a></h4>
						</div>
						<div class="arrow">
							<img src="img/more.png"/>
						</div>
					</div>
				</div>
				<div class="meishi_title">
						<div>
							<img src="img/meishi1.png" />
						</div>
						<div>
							<img src="img/meishi2.png" />
						</div>
						<div>
							<img src="img/meishi3.png" />
						</div>
						<div>
							<img src="img/meishi4.png" />
						</div>
				</div>
				<div class="title">
					<div class="titleL">
						<div class="flower">
							<img src="img/yundonglei.png"/>
						</div>
						<div class="youhui">
							<h4>运动类</h4>
						</div>
					</div>
					<div class="titleR">
						<div class="more">
							<h4><a href="product.html">更多</a></h4>
						</div>
						<div class="arrow">
							<img src="img/more.png"/>
						</div>
					</div>
				</div>
				<div class="meishi_title">
						<div>
							<img src="img/yundong1.png" />
						</div>
						<div>
							<img src="img/yundong2.png" />
						</div>
						<div>
							<img src="img/yundong3.png" />
						</div>
						<div>
							<img src="img/yundong4.png" />
						</div>
				</div>
				<div class="title">
					<div class="titleL">
						<div class="flower">
							<img src="img/yundonglei.png"/>
						</div>
						<div class="youhui">
							<h4>电影类</h4>
						</div>
					</div>
					<div class="titleR">
						<div class="more">
							<h4><a href="index.html">更多</a></h4>
						</div>
						<div class="arrow">
							<img src="img/more.png"/>
						</div>
					</div>
				</div>
				<div class="meishi_title">
						<div>
							<img src="img/dianying1.png" />
						</div>
						<div>
							<img src="img/dianying2.png" />
						</div>
						<div>
							<img src="img/dianying1.png" />
						</div>
						<div>
							<img src="img/dianying2.png" />
						</div>
				</div>
			</section>
			<footer>
				
					<div>
						<a href="index.html"><img src="img/shouye.png"/></a>
						<h2>首页</h2>
					</div>
					<div>
						<a href="fenlei.html"><img src="img/fenlei2.png"/></a>
						<h2>分类</h2>
					</div>
				
					<div>
						<a href="faxian.html"><img src="img/faxian.png"/></a>
						<h2>发现</h2>
					</div>
					<div>
						<a href="wode.html"><img src="img/wode.png"/></a>
						<h2>我的</h2>
					</div>
				
			</footer>
		</div>
		<script type="text/javascript" src="js/swiper-4.3.3.min.js" ></script>
		<script>
		    var swiper = new Swiper('.swiper-container', {
			      slidesPerView: 4,
			      spaceBetween: 30,
			      autoplay:{
			      	delay:1,
			      },
			      pagination: {
			        el: '.swiper-pagination',
			        clickable: true,
			      },
			    });
  		</script>
	</body>
</html>
